<template>
  <div @mouseover="showset" @mouseout="hideset">
    <router-link :to="moddata.url+'/'+index" class="module_set">
      <div class="n_i " :style="{backgroundColor:moddata.config.backgroundColor}">
        <i :class="['iconfont','moduleIcon',moddata.config.icon?moddata.config.icon:moddata.defaultIcon]" :style="{color:moddata.config.color}"></i>
      </div>
      <div class="m_t" :style="{color:moddata.config.color}">{{moddata.config.title}}</div>
      <div class="visiblebox" v-if="designmode">
        <i :class="['iconfont','icon-attentionfill']" v-show="moddata.visible"></i>
        <i :class="['iconfont','icon-attentionforbidfill']" v-show="!moddata.visible"></i>
      </div>
    </router-link>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import {
    MessageBox
  } from 'element-ui'
  export default {
    props: ["moddata", "index", "taskdata","designmode"],
    data: function () {
      return {
        maskshow: false
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$emit('setmod', this.moddata.id, this.index ,this.moddata.type)
      },
      deletemod: function () {
        this.$emit("delreq", this.index)
      }
    }
  }
</script>

<style scoped>
.mask .settingbtn{
  color: #fff;
  border-radius: 3px;
  width: 80%;
  text-align: center;
  height: 36px;
  line-height: 34px;
  padding: 0;
  margin-left: 4px;
  font-size: 13px;
  background: #27282d;
  text-shadow: none;
  float: left;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.3);
  box-sizing: border-box;
  position:absolute;
  top:15%;
  right: 10%;
  cursor: pointer;
}
.mask .deletebtn{
  color: #fff;
  border-radius: 3px;
  width: 80%;
  text-align: center;
  height: 36px;
  line-height: 34px;
  padding: 0;
  margin-left: 4px;
  font-size: 13px;
  background: #27282d;
  text-shadow: none;
  float: left;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.3);
  box-sizing: border-box;
  position:absolute;
  top:55%;
  right: 10%;
  cursor: pointer;
}
.mask .settingbtn:hover,.mask .deletebtn:hover{
  background: #35363c;
}
.visiblebox{
    position: absolute;
    top:3px;
    right:5px;
  }
</style>